<template>
  <div class="p-4">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-form :model="listQuery" inline>
          <el-form-item>
            <el-button
              type="success"
              size="small"
              icon="el-icon-plus"
              @click="deBounceWrap(handleAdd)"
              >新增</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              size="small"
              icon="el-icon-search"
              @click="deBounceWrap(handleSearch)"
              >查看标记用户列表</el-button
            >
          </el-form-item>
          <br />
          <el-form-item label="可抽盲盒数量">
            <el-input class="w-50" v-model.number="listQuery.number"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="success"
              size="small"
              @click="deBounceWrap(handlekeep)"
              >保存</el-button
            >
          </el-form-item>
        </el-form>
        <div class="flex items-center mb-3">
          <el-button
            @click="handleChange(1)"
            class="mr-3 cursor-pointer"
            type="primary"
            plain
            >普通用户</el-button
          >
          <el-button
            @click="handleChange(2)"
            class="mr-3 cursor-pointer"
            type="danger"
            plain
            >标记用户</el-button
          >
        </div>
      </div>
      <el-table :data="blindboxData" border>
        <el-table-column prop="id" label="序号"></el-table-column>
        <el-table-column
          prop="recharge_money"
          label="充值金额"
        ></el-table-column>
        <el-table-column
          prop="max_number"
          label="最大盲盒数量"
        ></el-table-column>
        <el-table-column prop="ratio" label="抽取概率"> </el-table-column>
        <el-table-column
          prop="current_number"
          label="当前抽取数量"
        ></el-table-column>
        <el-table-column prop="add_time" label="创建时间"></el-table-column>
        <el-table-column label="操作" width="100px">
          <template slot-scope="scope">
            <el-button
              type="primary"
              plain
              size="mini"
              icon="el-icon-edit"
              @click="handleEdit(scope.row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- <cus-pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.per_page"
        @pagination=""
      /> -->
    </el-card>
    <el-dialog
      :title="titleOptions[title] + '可抽取盲盒'"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="30%"
      @close="handleClear"
      :before-close="handleClose"
    >
      <el-form :model="form" ref="form" :rules="rules">
        <el-form-item label="充值金额" prop="recharge_money" label-width="120px">
          <el-input v-model.number="form.recharge_money" clearable></el-input>
        </el-form-item>
        <el-form-item label="最大盲盒数量" prop="max_num" label-width="120px">
          <el-input v-model.number="form.max_num" clearable></el-input>
        </el-form-item>
        <el-form-item label="抽取概率" prop="probability" label-width="120px">
          <el-input v-model.number="form.probability" clearable></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="primary" plain @click="handleClose">返回</el-button>
        <el-button type="primary" @click="deBounceWrap(handleSumbit, 'form')"
          >提交</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  blindboxList,
  blindboxAdd,
  blindboxEdit,
  blindboxNum,
  blindboxUser,
} from "@/api/blindBox/blindboxNumber.js";
export default {
  name: "blindboxNumber",
  data() {
    return {
      /*1：普通用户(默认)；2：标记用户*/
      type: 1,
      listQuery: {
        page: 1,
        per_page: 20,
        number: 0, // 可抽取盲盒数量
      },
      total: 0,
      blindboxData: [],
      titleOptions: {
        add: "新增",
        edit: "编辑",
      },
      title: "add",
      rowData: {},
      form: {
        recharge_money: undefined,
        max_num: undefined,
        probability: undefined,
      },
      rules: {
        recharge_money: [
          { required: true, message: "请输入充值金额", trigger: "blur" },
        ],
        max_num: [{ required: true, message: "请输入最大盲盒数量", trigger: "blur" }],
        probability: [
          { required: true, message: "请输入抽取概率", trigger: "blur" },
        ],
      },
      dialogVisible: false,
    };
  },
  created() {
    this.getBlindboxList();
  },
  methods: {
    getBlindboxList() {
      let data = {
        type: this.type,
        page: this.listQuery.page,
        per_page: this.listQuery.per_page,
        number: this.listQuery.number,
      };
      blindboxList(data).then((res) => {
        this.blindboxData = res.data.list;
        this.listQuery.number = res.data.max_blind_box_number;
      });
    },
    //更新可抽取盲盒数量
    getUpatenum() {
      let data = { type: this.type, number: this.listQuery.number };
      blindboxNum(data).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "设置成功",
            type: "success",
          });
        }
      });
    },
    //保存
    handlekeep() {
      this.getUpatenum();
    },
    handleSearch() {},

    handleChange(type) {
      this.type = type;
      this.getBlindboxList();
    },
    handleAdd() {
      this.title = "add";
      this.dialogVisible = true;
    },
    handleEdit(row) {

      this.form.recharge_money = this.rowData.recharge_money

      this.form.max_num = this.rowData.max_number
      this.form.probability = this.rowData.ratio
      this.dialogVisible = true
    },
      handleSumbit(){
       this.$refs['form'].validate((valid) => {
          if (valid) {
            if(this.title === "add"){
              let data={
                type:this.type,
                recharge_money:this.form.recharge_money,
                max_num:this.form.max_num,
                probability:this.form.probability
              }
              blindboxAdd(data).then(res=>{
                  if(res.code === 200){
                    this.$message.success('提交成功')
                   this.getBlindboxList();
                    this.dialogVisible = false;
                  }else{}
              })
            }
            if(this.title === "edit"){
                  let data = {id:this.rowData.id,
                  recharge_money:this.form.recharge_money,
                  max_num:this.form.max_num,
                  probability:this.form.probability
                  }
                blindboxEdit(data).then(res=>{
                  if(res.code === 200){
                    this.$message.success('编辑成功')
                    this.getBlindboxList();
                    this.dialogVisible = false
                  }
                })
            }
          } else {

            return false;
          }
        });
      },
    handleClose() {
      this.dialogVisible = false;
    },
    handleClear() {
      this.$refs["form"].resetFields();
      this.form= {
        recharge_money: undefined,
        max_num: undefined,
        probability: undefined,
      }
    },
  },
};
</script>

<style scoped>
</style>
